/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import url("./spectrum-card.css");
@import url("./card-overrides.css");

:host([href]:not([href=""])) {
    cursor: pointer;
}

#like-anchor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.action-button {
    flex-grow: 0;
}

:host([dir="ltr"]) .action-button {
    margin-left: auto;
}

:host([dir="rtl"]) .action-button {
    margin-right: auto;
}

/* The description slot has a psuedo-element that also needs to receive the font styling.
We need to add the declaration to the slot as well */
slot[name="description"] {
    font-size: var(--spectrum-card-subtitle-text-size, var(--spectrum-font-size-50));
}

#preview + #cover-photo {
    display: none;
}

#cover-photo ::slotted(*),
:host(:not([variant="quiet"])) #preview ::slotted(*) {
    width: 100%;
    display: block;

    /* Since we're using <img> tags instead of background-image for the cover photo,
    we need an additional object-fit property to preserve the aspect ratio of the image
    In spectrum-css, background-size is used */
    object-fit: cover;
}

:host(:not([variant="gallery"])) #preview ::slotted(*) {
    height: 100%;
}

:host([variant="quiet"][size="s"]) #preview ::slotted(*) {
    border-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-focus-indicator-thickness));
}

:host([horizontal]) #preview {
    width: auto;
}

:host([horizontal]) sp-asset {
    height: inherit;
}

sp-popover {
    align-items: center;
}

.actions {
    visibility: hidden;
    margin: auto;
}

/**
 * Allow that the heading element will take specified use of the available width whether
 * "actions" are supplied to the element or not.
 **/
.title {
    width: var(--spectrum-card-title-width);
}

.subtitle {
    font-family: var(--spectrum-sans-font-family-stack);
    font-size: var(--spectrum-detail-size-s);
    font-weight: var(--spectrum-detail-sans-serif-font-weight);
    line-height: var(--spectrum-detail-line-height);
}

:host:before,
:host:after {
    pointer-events: none;
}

:host([variant="quiet"]:focus) #preview:after {
    border: var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) solid var(--mod-card-focus-indicator-color, var(--spectrum-card-focus-indicator-color));
}

:host([variant="quiet"][selected]:focus) #preview {
    border-width: var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width));
}

/* This ensures that the checkbox is tabbable when the card toggles but is not itself focusable */
:host([toggles]:not([tabindex])) .checkbox-toggle {
    visibility: visible;
}

.checkbox-toggle .checkbox {
    --mod-checkbox-text-to-control: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wrapper {
    display: contents;
}

@media (prefers-reduced-motion: reduce) {
    /* With prefers-reduced-motion: reduce,
    we should not animate the checkbox fade in
    when the card receives focus, but still retain
    the transition-delay before hiding the checkbox on blur,
    which will ensure that tabbing from the card or action menu
    will focus the checkbox before it has a chance to hide.
    */
    .checkbox-toggle {
        transition-duration: 0s, 0s, 0s;
        transition-delay: 0s, 0s, 0.13s;
    }

    :host([focused]) .actions,
    :host([focused]) .checkbox-toggle,
    :host([selected]) .actions,
    :host([selected]) .checkbox-toggle,
    :host(:focus) .actions,
    :host(:focus) .checkbox-toggle {
        transition-delay: 0s, 0s, 0s;
    }
}
